<template>
  <div class="MapWarnPanel">
    <div class="MapWarnPanel--header">
      <div class="MapWarnPanel--header__title">{{info.cameraName}}</div>
      <div class="MapWarnPanel--header__close" @click="closeAction"></div>
    </div>
    <div class="MapWarnPanel--content">
      <div class="MapWarnPanel--content__subpanel">
        <div class="content">
          <div class="videoContainer">
            <H5VideoPlayer v-if="camera.indexCode" :camera="camera"> </H5VideoPlayer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import H5VideoPlayer from "@/components/h5player/H5VideoPlayer.vue";

const props = defineProps({
  info: {
    type: Object,
    default() {
      return {
        "cameraIndexCode": "fcd253f41fdd4f799c099997373b574c",
        "cameraName": "研发大门口",
        "x": "0",
        "y": "0",
        "hasAlarm": false,
        "alarmRecord": []
      }
    }
  }
})

const $emit = defineEmits(['close'])

const camera = ref({})
onMounted(() => {
  camera.value = {
    indexCode: props.info.cameraIndexCode,
    ...props.info
  }
})

function closeAction () {
  $emit('close')
}
</script>

<style lang="scss" scoped>
.MapWarnPanel {
  width: 466px;
  height: 300px;
  background-image: url('@/assets/images/armyScreen/常规视频播放bg@2x.png');
  background-size: cover;

  display: flex;
  flex-direction: column;

  &--header {
    height: 32px;
    line-height: 32px;
    padding-left: 36px;
    position: relative;

    &__title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 500;
    }

    &__close {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 8px;
      top: 3px;
      color: #0DFDF0;
      cursor: pointer;
    }
  }

  &--content {
    flex-grow: 1;

    &__subpanel {
      width: 462px;

      .content {
        margin-top: 8px;

        .videoContainer {
          width: 446px;
          height: 245px;
          //background-image: url('@/assets/images/armyScreen/sample1.png');
          //background-size: cover;
          margin: 0 auto;
          background-color: transparent;
        }
      }
    }
  }
}
</style>
